/*==================================================
            BOARD OF DIRECTORS
==================================================*/

.board-wrapper{
    background:#fff;
}

.board-container{
    max-width:1300px;
    margin:0 auto;
    padding:40px 50px 80px;
}

.board-title{
    text-align:center;
    font-size:42px;
    font-weight:300;
    color:#555;
    margin-bottom:60px;
    position:relative;
    letter-spacing:.5px;
}

.board-title::after{
    content:"";
    width:70px;
    height:2px;
    background:#10cca9;
    display:block;
    margin:18px auto 0;
}

/*=====================================
    GRID
=====================================*/

.director-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:60px;
    margin-bottom:70px;
    align-items:start;
}

/*=====================================
    CARD
=====================================*/

.director-card{
    background:#fff;
}

.director-card img{
    width:100%;
    display:block;
}

.director-card h3{
    margin:25px 0 18px;
    font-size:24px;
    line-height:1.45;
    font-weight:700;
    color:#333;
}

.director-card p{
    color:#666;
    font-size:15px;
    line-height:1.9;
    text-align:justify;
}

/*=====================================
    DOWNLOAD
=====================================*/

.board-download{
    text-align:center;
    margin:40px 0 70px;
}

.board-download a{
    display:inline-block;
    padding:14px 28px;
    background:#10cca9;
    color:#fff;
    font-size:15px;
    border-radius:3px;
    transition:.3s;
}

.board-download a:hover{
    background:#222;
}

/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:991px){

.board-container{
    padding:100px 25px 50px;
}

.director-grid{
    grid-template-columns:1fr;
    gap:45px;
}

.board-title{
    font-size:34px;
}

.director-card h3{
    font-size:22px;
}

}

@media(max-width:768px){

.board-title{
    font-size:28px;
}

.director-card h3{
    font-size:20px;
}

.director-card p{
    font-size:14px;
}

}
/*==================================================
        BOARD OF DIRECTORS - PART B
==================================================*/

/*=====================================
    IMAGE
=====================================*/

.director-card{
    transition:all .35s ease;
}

.director-card img{
    width:100%;
    height:auto;
    display:block;
    border-radius:2px;
    transition:transform .5s ease;
}

.director-card:hover img{
    transform:scale(1.02);
}

/*=====================================
    NAME
=====================================*/

.director-card h3{

    margin:22px 0 16px;

    color:#333;

    font-size:22px;

    font-weight:700;

    line-height:1.45;

    letter-spacing:.2px;

}

/*=====================================
    DESCRIPTION
=====================================*/

.director-card p{

    color:#666;

    font-size:15px;

    line-height:1.9;

    text-align:justify;

    margin-bottom:0;

}

/*=====================================
    CARD SPACING
=====================================*/

.director-card{

    display:flex;

    flex-direction:column;

}

.director-grid{

    align-items:flex-start;

}

/*=====================================
    PAGE CONTENT
=====================================*/

.board-container{

    animation:boardFade .7s ease;

}

@keyframes boardFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
    DOWNLOAD BUTTON
=====================================*/

.board-download{

    text-align:center;

    margin:50px 0 80px;

}

.board-download a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    background:#10cca9;

    color:#fff;

    font-size:15px;

    font-weight:600;

    border-radius:3px;

    transition:.3s;

}

.board-download a:hover{

    background:#222;

}

/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:1024px){

.director-grid{

    gap:40px;

}

}

@media(max-width:991px){

.director-grid{

    grid-template-columns:1fr;

}

.director-card{

    max-width:700px;

    margin:auto;

}

}

@media(max-width:768px){

.board-container{

    padding:90px 20px 50px;

}

.director-card h3{

    font-size:20px;

}

.director-card p{

    font-size:14px;

}

}